<!-- 编辑地址 -->
<template>
	<view class="edit_box">
		<view class="edit_group">
			<view class="edit_card" @click="showPicker">
				<input type="text" v-model="info.address" placeholder="请选择地址"
					disabled="disabled"></input>
				<view class="edit_line"></view>
			</view>
			<view class="edit_card">
				<input type="text" name="input1" v-model="info.address_detail" placeholder="请输入详细地址" />
				<view class="edit_line"></view>
			</view>
			<view class="edit_card">
				<input type="text" name="input1" v-model="info.name" placeholder="请输入收货人" />
				<view class="edit_line"></view>
			</view>
			<view class="edit_card">
				<input type="text" name="input3" v-model="info.mobile" placeholder="请输入手机号"  />
				<view class="edit_line"></view>
				<view class="edit_middle">
					<view class="default_address">
						<view class="circle">
							<image :src="info.is_default ? select_ico.seleted:select_ico.no_select" 
									 @tap="show_show" ></image>
						</view>
						<span>设为默认地址</span>
					</view>
				</view>
			</view>
		</view>
		<button class="submit-btn" @click="save">
			<view class="submit-text">保存</view>
		</button>
		<u-picker mode="region" v-model="show" :area-code='["13", "1303", "130304"]' @confirm="confirm" :params="params"></u-picker>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
    import mixins from '@/common/mixins.js';
	export default {
        mixins:[mixins],
		data() {
			return {
				show: false,
				params :{
					province: true,
					city: true,
					area: true
				},
				select_ico: {
					seleted: this.imgUrl + 'common_ic_12_selected.png', 
					no_select: this.imgUrl + 'common_ic_12.png',
				},
				rule: {
					address: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请选择地址",
						}, ],
					},
					address_detail: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请选择详细地址",
						}, ],
					},
					name: {
						type: "form_data",
						rules: [{
							rule: /^s*$/,
							v_res: false,
							message: "请输入收货人",
						}, ],
					},
					mobile: {
						type: "form_data",
						rules: [{
								rule: /^s*$/,
								v_res: false,
								message: "请填写手机号",
							}, {
								rule: /^[1][3-9][0-9]{9}$/,
								v_res: true,
								message: "请填写正确的手机号码",
							},
					
						],
					},
				},
				index: -1, // 上个页面传来的值
				show_circle: 0, // 设为默认地址的图标
				/**
				 * 选择地址子组件所需的值
				 */
				area: [], // 传入子组件的地址数据
				// 后端传来省的数据
				province: [
					'福建省',
					'广东省',
					'吉林省',
					'江西省',
					'浙江省',
					'湖北省',
					'湖南省',
					'海南省',
					'四川省',
					'云南省',
					'山东省',
					'山西省',
					'陕西省',
					'河北省',
					'河南省',
					'甘肃省',
					'辽宁省',
					'安徽省',
					'台湾省',
					'贵州省',
					'青海省',
					'江苏省',
				],
				city: ['泉州市', '厦门市'], // 后端传来市的数据
				county: ["丰泽区", "鲤城区"], // 后端传来区、县的数据
				street: ["丰泽街道", "泉秀街道"], // 后端传来街道的数据
				btn: "保持",
				place: '',
				obj: {
					address: '',
					place: '',
					mobile: '',
					name: '',
					is_default: 0,
					member_id: 1,
				},
			}
		},
		computed: {
			...mapState({
				info: state => state.address.info
			}),
		},
		methods: {
			confirm(params) {
				this.info.address = params.province.label + params.city.label + params.area.label
			},
			// 默认按钮
			show_show() {
				this.show_circle = !this.show_circle
				if(this.show_circle) {
					this.info.is_default = 0
				} else {
					this.info.is_default = 1
				}
				return this.info.is_default
			},
			// 保存
			save() {
				let status = this.$tools.verification(this.info, this.rule)
				if(!status.status) return;
				this.info.member_id = 1
				this.info.address_id = this.info.id
				this.$api('memberupdateAddress',this.info).then(res => {
					if(res.status ==1) {
						this.$tools.toast('修改地址成功')
						setTimeout(()=> {
							this.$Router.back(1);
							this.$store.dispatch('address/get_Place',{ member_id: 1 })
						},1000)
					}
				})
			},
            back() {
               this.$Router.back(1);
            },
			showPicker() {
				this.show = true
			},
			checkedAll(e) {
				this.info_store.map(val => {
					if (val.show) {
						val.show = false;
					} else {
						val.show = true
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	@import "./index.scss";
</style>
